<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>小视频贩卖网</title>
  <!-- icon -->
  <link rel="stylesheet" href="/static/css/common/fonts/iconfont.css">
  <!-- logo图标 -->
  <link rel="icon" href="/static/favicon.ico" type="image/iconx">
  <!-- 消除浏览器差异 -->
  <link rel="stylesheet" href="/static/css/common/reset.css">
  <!-- 要写的CSS -->
  <link rel="stylesheet" href="/static/css/home.css">
</head>
<body>
  <div id="root">
    <!-- header -->
    <header class="header">
      <section class="left">
        <a href="/" style="color: #000">
          <img src="/static/images/favicon.ico" class="logo">
          <span class="title">小视频贩卖网</span>
        </a>
      </section>

      <section class="tab">
        <div class="tab-item">
          <a href="/type?id=592c253d3a322270d55a0b9f" class="item">课程</a>
        </div>
        <div class="tab-item">
          <a href="javascript:;" class="item" @click="payFor">付费咨询</a>
        </div>
        <div class="tab-item">
          <a href="/prc/3d" class="item">3D拖动相册</a>
        </div>
      </section>

      <section class="right">
        <a href="/order">
          <div class="shopcar">
            <i class="iconfont icon-gouwuche"></i>
            <span class="title">购物车</span>
          </div>
        </a>
        <div class="sign" v-if="!isSingnedin">
          <span class="signin"
            @click="signin">登录</span>
          <span class="signup"
            @click="signup">注册</span>
        </div>
        <div class="sign loging" v-if="isSingnedin">
          <div class="personal-wrapper">
            <img :src="_user.avatar" width="40" height="40">
          </div>
          <div class="information-wrapper">
            <div class="first">
              <div class="left-wrapper">
                <img :src="_user.avatar" width="75" height="75">
              </div>
              <div class="right-wrapper">
                <h3 class="name"><a href="/personal">{{ _user.username }}</a></h3>
              </div>
            </div>
            <div class="second">
              <div class="block-wrapper">
                <a href="/personal?type=course" class="shopcar">我的课程</a>
                <a href="/order" class="shopcar">我的订单</a>
                <a href="/personal" class="shopcar">个人设置</a>
              </div>
            </div>
            <div class="signout">
              <a :href="'/v1/api/user/logout/'+_user._id" class="out">安全退出</a>
            </div>
          </div>
        </div>
      </section>

      <section class="form-wrapper">
        <form action="" class="form-item">
          <div class="form-control">
            <input type="text" name="search" class="input-content">
            <button type="submit" class="submit">
              <i class="iconfont icon-sousuo-sousuo"></i>
            </button>
          </div>
        </form>
      </section>

    </header>

    <section class="nav">

      <div class="nav-wrapper">

        <div class="content-wrapper">
          <div class="bg-img">
            <img
              v-for="(tab, i) of tabs"
              :src="tab"
              :style="{opacity: currentPoint == i ? 1 : 0, visibility: currentPoint == i ? 'visible' : 'hidden'}">
          </div>
          <div class="left-tab">
            <ul class="tab">
              <li class="item"
                v-for="(tab, i) of data.types">
                <h3 class="title">
                  {{ tab.name }}
                  <span class="goto">
                    <i class="iconfont icon-iconfont-edu09"></i>
                  </span>
                </h3>
                <div class="detail-wrapper"
                  :style="{backgroundImage: 'url(/static/images/bgs/bg' + (i + 1) + '.png'}">
                  <div class="link-wrapper">
                    <ul class="items-wrapper">
                      <li class="item-link" v-for="(item, i) of tab.vedios" v-if="i <= 11">
                        <a :href="'/vedio?id=' + item._id">{{ item.title }}</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <a href="#" class="right-bander">
            <div class="toleft" @click.stop.prevent="toLeft">
              <i class="iconfont icon-icon09"></i>
            </div>
            <div class="toright" @click.stop.prevent="toRight">
              <i class="iconfont icon-iconfont-edu09"></i>
            </div>
            <div class="check-point">
              <div class="point"
                @click.stop.prevent="changePoint(i)"
                v-for="(point, i) of tabs"
                :class="{active: currentPoint == i}"
              ></div>
            </div>
          </a>
        </div>

        <div class="nav-bottom">
          <ul class="bottom-tab">
            <li class="item"
              v-for="item of navBottom"
              :style="{backgroundImage:'url(' + item + ')'}">
              <a href="#" style="display:block;width:100%;height:100%"></a>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <section class="wrapper">
      <section
        class="details-wrapper"
        v-for="type of types"
        v-if="type.vedios.length">
        <h2 class="title">
          {{ type.name }}
          <a :href="'/type?id=' + type._id" class="more">更多 <i class="iconfont icon-iconfont-edu09"></i></a>
        </h2>
        <div class="details">
          <div
            class="detail"
            v-for="(vedio, index) of type.vedios"
            v-if="index <= 4">
            <h3 class="child-title">
              {{ vedio.title }}
            </h3>
            <a :href="'/vedio?id=' + vedio._id">
              <div class="body">
                <h3 class="heading">{{ vedio.title }}</h3>
                <div class="instruction">{{ vedio.summary }}</div>
                <div class="diff">{{ vedio.diffculty | diffFilt }} · {{ vedio.comment.length }}个评价</div>
              </div>
            </a>
          </div>
        </div>
      </section>
    </section>

    <footer class="footer">

      <div class="footer-wrapper">
        <div class="first-line">
          <a href="https://github.com/lastIndexOf" class="github">
            <i class="iconfont icon-github"></i>
          </a>
        </div>
        <div class="second-line">
          <a href="https://github.com/lastIndexOf/E-commerce.git" class="about-us">文档链接</a>
          <a href="javascript:;"
            class="about-us"
            @click="aboutUs">关于我们</a>
        </div>
        <div class="last-line">
          @made by 郑凡恺， 冯博， 章焕
        </div>
      </div>
    </footer>
    <div class="to-top"
      v-show="isShow"
      @click="toTop">
      <i class="iconfont icon-fanhuidingbu"></i>
    </div>
  </div>

  <!--<audio style="display:none" autoplay loop src="/static/musics/宋冬野 - 安和桥.mp3">

  </audio>-->
  <script src="/static/js/bundles/home.js"></script>
</body>
</html>
